/**
 * drawDesign
 * @file drawDesign 画线，画文字，画箭头等东西
 */
class drawDesign {
  constructor() {
    this.Plot = { // 箭头方法
      angle: "",
      polygonVertex: [],
      CONST: { edgeLen: 50, angle: 10 },
      //在CONST中定义的edgeLen以及angle参数
      //getRadian 返回以起点与X轴之间的夹角角度值
      getRadian: function (beginPoint, stopPoint,zoom,dataZoom) {
        this.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
        if(zoom && dataZoom){
          this.CONST.edgeLen = 28/dataZoom*zoom;
          this.CONST.angle = 18/dataZoom*zoom;
          if(28/dataZoom*zoom > 60){
            this.CONST.edgeLen = 60;
          }
          if(18/dataZoom*zoom > 20){
            this.CONST.angle = 20;
          }
        }else{
          this.CONST.edgeLen = 28;
          this.CONST.angle = 18;
        }
      },
      ///获得箭头底边两个点
      arrowCoord: function (beginPoint, stopPoint,zoom,dataZoom) { //1
        this.polygonVertex[0] = beginPoint.x;
        this.polygonVertex[1] = beginPoint.y;
        this.polygonVertex[6] = stopPoint.x;
        this.polygonVertex[7] = stopPoint.y;
        this.getRadian(beginPoint, stopPoint,zoom,dataZoom);
        //console.log( Plot.getRadian(beginPoint, stopPoint),'zzzz');
        this.polygonVertex[8] = stopPoint.x - this.CONST.edgeLen * Math.cos(Math.PI / 180 * (this.angle + this.CONST.angle));
        this.polygonVertex[9] = stopPoint.y - this.CONST.edgeLen * Math.sin(Math.PI / 180 * (this.angle + this.CONST.angle));
        this.polygonVertex[4] = stopPoint.x - this.CONST.edgeLen * Math.cos(Math.PI / 180 * (this.angle - this.CONST.angle));
        this.polygonVertex[5] = stopPoint.y - this.CONST.edgeLen * Math.sin(Math.PI / 180 * (this.angle - this.CONST.angle));
      },
      //获取另两个底边侧面点
      sideCoord: function () {//2
        var midpoint = {};
        // midpoint.x = polygonVertex[6] - (CONST.edgeLen * Math.cos(Plot.angle * Math.PI / 180));
        // midpoint.y = polygonVertex[7] - (CONST.edgeLen * Math.sin(Plot.angle * Math.PI / 180));
        midpoint.x = (this.polygonVertex[4] + this.polygonVertex[8]) / 2;
        midpoint.y = (this.polygonVertex[5] + this.polygonVertex[9]) / 2;
        this.polygonVertex[2] = (this.polygonVertex[4] + midpoint.x) / 2;
        this.polygonVertex[3] = (this.polygonVertex[5] + midpoint.y) / 2;
        this.polygonVertex[10] = (this.polygonVertex[8] + midpoint.x) / 2;
        this.polygonVertex[11] = (this.polygonVertex[9] + midpoint.y) / 2;
      },
      //画箭头
      drawArrow: function (ctx, color) {//3
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.moveTo(this.polygonVertex[0], this.polygonVertex[1]);
        ctx.lineTo(this.polygonVertex[2], this.polygonVertex[3]);
        ctx.lineTo(this.polygonVertex[4], this.polygonVertex[5]);
        ctx.lineTo(this.polygonVertex[6], this.polygonVertex[7]);
        ctx.lineTo(this.polygonVertex[8], this.polygonVertex[9]);
        ctx.lineTo(this.polygonVertex[10], this.polygonVertex[11]);
        // ctx.lineTo(polygonVertex[0], polygonVertex[1]);
        ctx.closePath();
        ctx.fill();
      }
    }
  }
  initLoadImg(canvasWidth, canvasHeight, imageWidth, imageHeight) {
    if (imageWidth / imageHeight > canvasWidth / canvasHeight) {
      let info = {};
      info.endx = canvasWidth;
      info.endy = parseInt(canvasWidth / (imageWidth / imageHeight));
      info.x = 0;
      info.y = parseInt((canvasHeight - info.endy) / 2);
      return info;
    } else if (imageWidth / imageHeight < canvasWidth / canvasHeight) {
      let info = {};
      info.endx = parseInt(canvasHeight * (imageWidth / imageHeight));
      info.endy = canvasHeight;
      info.x = parseInt((canvasWidth - info.endx) / 2);
      info.y = 0;
      return info;
    } else {
      let info = {};
      info.endx = canvasWidth;
      info.endy = canvasHeight;
      info.x = 0;
      info.y = 0;
      return info;
    }
  }
  drawPoint(ctx, x, y, nextx, nexty, size, color) { // 点
    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.lineWidth = size;
    ctx.strokeStyle = color;
    ctx.moveTo(x, y);
    ctx.lineTo(nextx, nexty);
    ctx.closePath();
    ctx.stroke();
  }
  drawLine(ctx, x, y, nextx, nexty, size, color) { // 线
    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.lineWidth = size;
    ctx.strokeStyle = color;
    ctx.moveTo(x, y);
    ctx.lineTo(nextx, nexty);
    ctx.closePath();
    ctx.stroke();
  }
  drawRect(ctx, x, y, w, h, size, color) { // 矩形
    ctx.lineWidth = size;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.strokeRect(x, y, w, h);
  }
  drawFont(ctx, x, y, text, size, color) { // 文字
    ctx.fillStyle = color;
    ctx.font = size;
    ctx.textBaseline = "top";
    ctx.fillText(text, x, y);
  }
  EvenCompEllipse(ctx, x, y, a, b, size, color){ // 圆
    ctx.save();
    //选择a、b中的较大者作为arc方法的半径参数
    var r = (a > b) ? a : b; 
    r = Math.abs(r)
    var ratioX = a / r; //横轴缩放比率
    var ratioY = b / r; //纵轴缩放比率
    ctx.lineWidth = size;
    ctx.strokeStyle = color;
    ctx.scale(ratioX, ratioY); //进行缩放（均匀压缩）
    ctx.beginPath();
    //从椭圆的左端点开始逆时针绘制
    ctx.moveTo((x + a) / ratioX, y / ratioY);
    ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  };
  drawAllData(ctx,x,y,endx,endy,zoom,data) {
    for (var i = 0; i < data.length; i++) {
      switch (data[i].type) {
        case 'point':
          for (var q = 0; q < data[i].data.x.length; q++) {
            var x0 = data[i].data.x[q] * endx + x;
            var y0 = data[i].data.y[q] * endy + y;
            var x1 = data[i].data.x[q + 1] * endx + x;
            var y1 = data[i].data.y[q + 1] * endy + y;
            var size = (data[i].attr.size/data[i].attr.zoom)*zoom;
            var color = data[i].attr.color;
            this.drawPoint(ctx, x0, y0, x1, y1, size, color)
          }
          break;
        case 'rect':
          var x0 = data[i].data.x * endx + x;
          var y0 = data[i].data.y * endy + y;
          var w = data[i].enddata.x * endx + x - x0;
          var h = data[i].enddata.y * endy + y - y0;
          var size = (data[i].attr.size/data[i].attr.zoom)*zoom;
          var color = data[i].attr.color;
          this.drawRect(ctx, x0, y0, w, h, size, color)
          break;
        case 'arrow':
          var x0 = data[i].data.x * endx + x;
          var y0 = data[i].data.y * endy + y;
          var x1 = data[i].enddata.x * endx + x;
          var y1 = data[i].enddata.y * endy + y;
          this.Plot.arrowCoord({ x: x0, y: y0 }, { x: x1, y: y1 },zoom,data[i].attr.zoom);
          this.Plot.sideCoord();
          this.Plot.drawArrow(ctx, data[i].attr.color);
          break;
        case 'font':
          console.log('font',data[i]);
          var x0 = data[i].data.x * endx + x;
          var y0 = data[i].data.y * endy + y;
          var text = data[i].data.text;
          var size = (data[i].attr.size/data[i].attr.zoom)*zoom +'px 宋体';
          var color = data[i].attr.color;
          this.drawFont(ctx, x0, y0, text, size, color);
          break;
        case 'line':
          var x0 = data[i].data.x * endx + x;
          var y0 = data[i].data.y * endy + y;
          var w = data[i].enddata.x * endx + x;
          var h = data[i].enddata.y * endy + y;
          var size = (data[i].attr.size/data[i].attr.zoom)*zoom;
          var color = data[i].attr.color;
          this.drawLine(ctx, x0, y0, w, h, size, color)
        break;
        case 'circular':
          var x0 = data[i].data.x * endx + x;
          var y0 = data[i].data.y * endy + y;
          var w = data[i].enddata.x * endx + x - x0;
          var h = data[i].enddata.y * endy + y - y0;
          var size = (data[i].attr.size/data[i].attr.zoom)*zoom;
          var color = data[i].attr.color;
          this.EvenCompEllipse(ctx, x0, y0, w, h, size, color);
        break;
      }
    }
  }
}

export default new drawDesign();